<template>
    <div>
      <div class="bg-white grid-content">
        <el-form :inline="true" :model="SyjForm" class="demo-form-inline">

          <el-form-item label="日期:">
            <el-date-picker
                v-model="searchDate"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <!-- <el-form-item label="日期:">
            <el-date-picker v-model="searchDate" type="daterange" align="right" unlink-panels range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="formSearch()">查询</el-button>
            <el-button type="success" @click="download()">下载</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="bg-white grid-content">
        <div style="overflow: hidden; ">
          <div class="mytitle">水源井统计</div>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData">
            <el-table-column type="index" label="序号" :index="indexMethod">
            </el-table-column>
            <el-table-column align="center" prop="tyjm" label="水源井名称" width="100px">
            </el-table-column>

            <!-- <el-table-column align="center" label="基础描述"> -->
            <el-table-column align="center" prop="dwmc" label="所属单位" width="150px">
            </el-table-column>
            <el-table-column align="center" prop="tcrq" label="投产日期" width="100px">
            </el-table-column>
            <el-table-column align="center" prop="sjcsl" label="设计产水量（10⁴m³/d）" width="110px">
                <!-- <el-table-column align="center" label="（10⁴m³/d）">
            </el-table-column> -->
            </el-table-column>
            <el-table-column align="center" prop="sjcsl1" label="实际产水量（10⁴m³/d）" width="110px">
            </el-table-column>
            <el-table-column align="center" prop="ssdxsy" label="所属地下水源">
            </el-table-column>
            <el-table-column align="center" prop="qsdw" label="取水单位">
            </el-table-column>
            <el-table-column align="center" prop="dxjsw" label="地下静水位">
            </el-table-column>
            <el-table-column align="center" prop="qsdlx" label="取水点类型">
            </el-table-column>
            <el-table-column align="center" prop="ssxzqy" label="所属行政区域">
            </el-table-column>
            <el-table-column align="center" prop="yt" label="用途">
            </el-table-column>
            <!-- </el-table-column> -->

            <!-- <el-table-column align="center" label="井属性"> -->
            <el-table-column align="center" prop="kccw" label="开采层位">
            </el-table-column>
            <el-table-column align="center" prop="zcbj" label="钻凿背景" width="150px">
            </el-table-column>
            <el-table-column align="center" prop="bxh" label="泵型">
            </el-table-column>
            <el-table-column align="center" prop="bpl" label="泵排量">
            </el-table-column>
            <el-table-column align="center" prop="djxh" label="电机型号">
            </el-table-column>
            <el-table-column align="center" prop="sccj" label="生产厂家">
            </el-table-column>
            <el-table-column align="center" prop="qszsj" label="取水证领取时间">
            </el-table-column>
            <el-table-column align="center" prop="sjjs" label="设计井深（m）">
            </el-table-column>
            <el-table-column align="center" prop="sjjs1" label="实际井深（m）">
            </el-table-column>
            <el-table-column align="center" prop="jj" label="井径（m）">
            </el-table-column>
            <el-table-column align="center" prop="jzt" label="水井状态">
            </el-table-column>
            <el-table-column align="center" prop="xjcs" label="修井次数（次）">
            </el-table-column>
            <!-- </el-table-column> -->

            <!-- <el-table-column align="center" label="井房"> -->
            <el-table-column align="center" prop="jfc" label="井房长（m）">
            </el-table-column>
            <el-table-column align="center" prop="jfk" label="井房宽（m）">
            </el-table-column>
            <el-table-column align="center" prop="jfg" label="井房高（m）">
            </el-table-column>
            <!-- </el-table-column> -->

            <el-table-column align="center" label="经纬度">
            <el-table-column align="center" prop="jd" label="经度">
            </el-table-column>
            <el-table-column align="center" prop="wd" label="纬度">
            </el-table-column>
            </el-table-column>


            <el-table-column align="center" label="计量">
            <el-table-column align="center" prop="jlsbxh" label="计量设施型号">
            </el-table-column>
            <el-table-column align="center" prop="jlsbxlh" label="计量设备（设施）出厂序列号" width="120px">
            </el-table-column>
            <el-table-column align="center" prop="azrq" label="计量设施安装检验合格日期" width="110px">
            </el-table-column>
            <el-table-column align="center" prop="sblx" label="水表类型">
            </el-table-column>
            </el-table-column>


          <el-table-column align="center" prop="bz" label="备注">
          </el-table-column>

        </el-table>
        <!-- 分页器 -->
        <el-pagination align='right'
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[5,10, 20, 30, 40, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

      </div>
    </div>
  </template>

  <script>
  import syjApi from '@/api/sjtb/scgl/syjtjb';

  export default {
    data() {
      return {
        pageNo: 1, //当前页码
        pageSize: 10, //每页显示数量
        total: 0, //总数量
        currentPage: 1,//当前页码
        //时间快捷选择
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        searchDate: "",
        //  表头数据
        tableHead: [
          { val: "指标11111", item: "target1" },
          { val: "指标2", item: "target2" },
          { val: "指标3", item: "target3" },
          { val: "指标4", item: "target4" },
          { val: "指标5", item: "target5" },
        ],
        // 表格数据
        tableData: [],
        //excel数据
        excelData:[],
        approveStatus:'',
        SyjForm:{},
        // // table数据总条数
        // tableTotal: 30,
        // // 分页数
        // currentSize: 10,
        // //当前页
        // currentPage: 4
      };
    },
    mounted(){

        this.search();
    },
    methods: {
        /**
        * 查询列表
        */
        async search() {
        // this.pageNo = pageNo; //当前页码
        // this.pageSize = pageSize; //每页显示数量
        //发送查询请求
            let res = await syjApi.getSyjList({pageNo:this.pageNo,pageSize:this.pageSize,startDate:this.searchDate[0],endDate:this.searchDate[1]});
            //判断是否成功
            if(res.success){
                console.log(res.data);
                //赋值
                this.tableData = res.data.records;
                //总数量
                this.total = res.data.total;
            }
        },
        //条件查询
        formSearch(){
            // console.log(this.searchDate);
            this.search();
        },
        //导出下载
        download() {
          require.ensure([], async () => {
            const { export_json_to_excel } = require('@/vendor/Export2Excel');//此处把路径要写对
            //复杂表头书写
            //添加表格id
            var myindex = [];
            for (var i = 0; i < this.total; i++) {
              myindex[i] = i + 1
            }
            var newindex = myindex.map(item => {
              console.log(item)
              return {
                index: item
              }
            });

            let res = await syjApi.getSyjList({pageNo:1,pageSize:this.total,startDate:this.searchDate[0],endDate:this.searchDate[1]});
            if(res.success){
              this.excelData =  res.data.records;
            }
            console.log('myindex', myindex);
            console.log('newindex', newindex);
            // //将添加的序号加入到表格中形成新的mergeArr表格
            let mergeArr = [newindex, this.excelData].reduce((prev, curr) => {
              return prev.map((item, index) => {
                return Object.assign(item, curr[index]);
              });
            });
            // var result = Object.assign(newindex,this.tableData)
            console.log('mergeArr', mergeArr);
            console.log('tableData', this.excelData);

            // const tHeader = ['日期', '姓名', '地址'];
            // // 上面设置Excel的表格第一行的标题
            //一级表头
            const multiHeader = [['序号','水源井名称','所属单位', '投产日期', '设计产水量', '实际产水量', '所属地下水源', '取水地点备注', '地下静水位', '取水地点', '取水地点备注', '用途', '开采层位', '钻凿背景','泵型','泵排量','电机型号','生产厂家','取水证领取时间','设计井深','实际井深','井径','水井状态','修井次数','井房长','井房宽','井房高','经纬度','','计量','','','']];
            //二级表头
            const header = ['','','', '', '', '', '', '', '', '', '', '', '', '','','','','','','','','','','','','','','经度','纬度','计量设施型号','计量设备（设施）出厂序列号','计量设施安装检验合格日期','水表类型'];
            //表头字段
            const filterVal = ['index', 'syjmc', 'ssdw', 'tcrq', 'shejicsl', 'shijicsl', 'ssdxsy', 'qsddbz1', 'dxjsw', 'qsdd', 'qsddbz2', 'yt', 'kccw','zzbj','bx','bpl','djxh','sccj','qszlqsj','shejijs','shijijs','jj','sjzt','xjcs','jfc','jfk','jfg','jwdDj','jwdBw','jlJlssxh','jlJlsb','jlJlssazjyhgrq','jlSblx'];
            //需要合并的单元格
            const merges = ['A1:A2','B1:B2','C1:C2','D1:D2','E1:E2','F1:F2','G1:G2','H1:H2','I1:I2','J1:J2','K1:K2','L1:L2','M1:M2','N1:N2','O1:O2','P1:P2','Q1:Q2','R1:R2','S1:S2','T1:T2','U1:U2','V1:V2','W1:W2','X1:X1','Y1:Y2','Z1:Z2','AA1:AA2','AB1:AC1','AD1:AG1'];
            //表头样式
            let headerStyle = ['A1','B1','C1','D1','E1','F1','G1','H1','I1','J1','K1','L1','M1','N1','O1','P1','Q1','R1','S1','T1','U1','V1','W1','X1','Y1','Z1','AA1','AB1','AC1','AD1','AE1','AF1','AG1'];
            // 上面的index、nickName、name是tableData里对象的属性
            console.log(this.excelData);
            // const list = this.tableData;  //把data里的tableData存到list
            // const data = this.formatJson(filterVal, list);
            const list = mergeArr;
            const data = this.formatJson(filterVal, list);
            console.log(111111);
            console.log(list);
            console.log(data);

            export_json_to_excel({
              //header: tHeader,
              multiHeader:multiHeader,
              header:header,
              merges:merges,
              headerStyle:headerStyle  ,
                data: data,
                filename: '水源井统计',
                autoWidth: true,
                bookType: 'xlsx'
            });//"列表excel"  是下载后的表名 可修改
            this.$message.success('导出成功！')
          })
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => {
            return filterVal.map(j => v[j])
          })
        },

        /*** 当每页数量发生变化时触发该事件 */
        handleSizeChange(size) {
            console.log(size);
            this.pageSize = size;
            //将每页显示的数量交给成员变量
            this.search(this.pageNo, size);
        },
        /*** 当页码发生变化时触发该事件 */
        handleCurrentChange(page) {
            console.log(page);
            this.pageNo = page;
            //调用查询方法
            this.search(page, this.pageSize);
        },
        // 序号计算
        indexMethod (index) {
            // index默认在0开始，这里+1
            return index + 1 + (this.pageNo - 1) * this.pageSize
        },
    },

  };
  </script>


  <style lang="scss" scoped>
  // 标题
  .mytitle {
    font-size: larger;
    padding-left: 45%;
    margin-bottom: 16px;
    float: left;
  }

  //按钮组
  .myTime {
    float: right;
  }

  //格子的样式
  .bg-white {
    background: #ffffff;
  }

  .grid-content {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
  }

  .calendar ::v-deep .el-button-group::before {
    display: none;
  }

  .calendar ::v-deep .el-button-group::after {
    display: none;
  }

  // 分割线样式
  .el-divider--horizontal {
    display: block;
    height: 2px;
    width: 100%;
    margin: 24px 0;
  }

  // 表单各项的样式
  .el-form-item {
    margin: 15px 10px 15px 10px;
  }
  </style>
